<template>
<div class="editor">
    <top-bar :control='control'  :title='tagData.author'></top-bar>

    <div class="content">
        <textarea @input='inputChang'  class='text' :value='tagData.text' rows="10" placeholder='请输入标签内容...'></textarea>
    </div>

    <div class="control">

        <i-cell-group>

            <i-cell>
                <div class="file-item" v-for='(url, index) of imgs' :key='index+1' >
                    <up-file-img  :url='url' @delete='delImg'></up-file-img>
                </div>
                 <div class="file-item" key=0 v-if='imgs.length < 3'>
                    <up-file @upFile='upImgs'></up-file>
                </div>
            </i-cell>
            
            <i-cell title='便签颜色'>
                <div slot='footer'>
                    <status-radio  @change='(data) =>{tagData.status = data}' :value="tagData.status"></status-radio>
                </div>
            </i-cell>

            <i-cell @click='publicSwitch' title='是否公开'>
                <i-switch @change='publicSwitch' slot="footer" :value='tagData.open'>
                </i-switch>
            </i-cell>

        </i-cell-group>
        
    </div>

</div>
</template>

<script>
import {mapActions, mapState} from'vuex'
import topBar from '@/components/topBar.vue'
import statusTip from '@/components/statusTip.vue'
import setatusRadio from'@/components/statusRadio.vue'
import upFile from'@/components/upFile.vue';
import upFileImg from '@/components/upFileImg.vue';


export default {
    components:{
        'top-bar': topBar,
        'status-tip': statusTip,
        'status-radio': setatusRadio,
        'up-file': upFile,
        'up-file-img': upFileImg
    },
    data: function() {	
        
        return {
            tagId: '',
            tagData: {},
            maxImgs: 3 
            
        }
    },

    computed:{

        ...mapState('http', ['baseUrl']),

        imgs(){
            let baseUrl = this.baseUrl;
            return this.tagData.imgs.map(url =>{
                return baseUrl + url;
            })
        },
        
        control(){
            let _this = this;

            return [
                {
                    type:'close',
                    size: 24,
                    color: '',
                    fn: () =>{
                        _this.giveUpEditor()   
                    }
                },
                {
                    type:'right',
                    size: 26,
                    color: '',
                    fn: () =>{
                        _this.upTagData()
                    }
                },
                
            ]
        }
        
    },
    
    methods: {

        ...mapActions('http', ['getLists', 'upTag', 'upFile']),

        async upImgs({tempFilePaths}){
            let _this = this;
            let len = this.maxImgs - this.tagData.imgs.length;
            if(tempFilePaths.length > len){
                tempFilePaths.length = len;
            }

            tempFilePaths.forEach(async (url) =>{
                let {data} = await _this.upFile(url)
                _this.tagData.imgs.push(data);
            })
            
            
        },

        delImg(url){
            this.tagData.imgs = this.tagData.imgs.filter(item =>{
                return url.indexOf(item) === -1;
            })
        },

       joinStr(arr){
           let end =''
           arr.forEach(item =>{
               end += `${item}\n`
           })
           return end;
       },

       async upTagData(){
           let res = await this.upTag(this.formData());
            if(res.statusCode === 200){

                wx.showToast({title: '成功'});

                setTimeout(() =>{
                    wx.reLaunch({url:'/pages/index/main'})
                }, 1000)
                
            }else{
                wx.showToast({title: '请重试', icon: 'none'});
            }
        },
    
        formData(){
            let reqData = this.tagData;
            let text = reqData.text;
            let summary = text.length > 18 ? text.slice(0, 18) : text;

            reqData = Object.assign(reqData, {
                summary,
                lastEditTime: new Date(),
                text: reqData.text.split('\n')
            })
            
            return reqData;
        },
    
        giveUpEditor(){
            
            let id = this.tagId;

            wx.showModal({
                title: '是否放弃编辑',
                success({confirm}){
                    if(confirm){
                        id ? wx.navigateBack({delta:1}) :  wx.reLaunch({url:'/pages/index/main'})
                    }
                }
            })
        },
        
        inputChang(e){
            this.tagData.text = e.target.value;
        },
        publicSwitch(){
            this.tagData.open = !this.tagData.open;
        },

        init(){
            
            let template = {
                id: '',
                author: this.$store.state.localUserInfo.nickname,
                summary: '',
                text: '',
                status: 'default',
                createTime: new Date(),
                lastEditTime: '',
                open: true,
                imgs: []
            }
            this.tagData = template;
        },
    },

        
   async onLoad(query){
        let {id} = query;

        this.init();
        
        if(id){
            this.tagId = id;
            let resData = (await this.getLists(id))[0];   
            resData.text = this.joinStr(resData.text);
            this.tagData = resData;
        }
    },
}
</script>

<style scoped lang='less'>
.editor{

    .content{
        padding: 2*@interval;
        max-height: 400rpx;
    }
    .text{
        font-size: 30rpx;
    }

    .file-item{
        display: inline-block;
        margin-left: 4*@interval;
    }
}

</style>